import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  Button,StatusBar,
  TouchableOpacity,Modal,TextInput
} from 'react-native';
import VideoPlayer from 'react-native-video-player';
import MyButton from './MyButton';
export default class VideoPlayerComp extends Component{
  constructor(props){
    super(props);
    this.state = ({
      videoUrl:'http://192.168.31.65:8088/images/12.mp4',
      thumbnail:'http://192.168.31.65:8088/images/_474png复制.png',
      video: { width: undefined, height: undefined, duration: undefined },
    })
  }
  onBuffer(){

  }
  videoError(){

  }
  _close(){

  }
  render(){
    const customStyles = {
      controls:{
        borderWidth:1,
        borderColor:'red',

      }
    }
    return(
			<View >
				<StatusBar hidden={true}/>
				<Modal animationType='none' 
						transparent={true} 
						visible={this.props.modal} 
						onRequestClose={this.props.close}
						style={styles.modal}
						>
						<View style={{flex:1,backgroundColor:'rgba(0,0,0,0.9)',justifyContent:'center',position:'relative',top:40,}}>
							<TouchableOpacity style={{backgroundColor:'white'}}>
								<Image source={require('../images/reg/icon_close.png')} style={{left:20,width:16,height:16}}/>
							</TouchableOpacity>
							<VideoPlayer style={{borderWidth:1,marginBottom:20}}
								endWithThumbnail
								thumbnail={{ uri: this.state.thumbnailUrl }}
								video={{ uri: this.state.videoUrl }}
								videoWidth={this.state.video.width}
								videoHeight={this.state.video.height}
								resizeMode="contain"
								duration={this.state.video.duration/* I'm using a hls stream here, react-native-video
									can't figure out the length, so I pass it here from the vimeo config */}
								ref={r => this.player = r}
								//customStyles={customStyles}
							/>
							{/* <Button
								onPress={() => this.player.stop()}
								title="Stop"
							/>
							<Button
								onPress={() => this.player.pause()}
								title="Pause"
							/>
							<Button
								onPress={() => this.player.resume()}
								title="Resume"
							/> */}
						</View>
					</Modal>
				</View>
    )
  }
}
const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 10,
    left: 10,
    bottom: 10,
    right: 10,
    backgroundColor:'#000'
  },
  modal:{
    flex:1,
    backgroundColor: '#00bfff',
  },
})